<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>生产管理</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<style>
    body{
        background-color: white;
    }
</style>
<style>
    a {
        text-decoration: none;
    }
</style>
<body>
<div id="pro">
    <el-container style="height: 95vh">
        <template>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item v-for="(item, index) in barlist" :key="item.permissionId" :index="item.permissionId">
                        <a :href="item.url" @click="next(index)" target="fram">{{item.permissionName}}</a>
                    </el-menu-item>
                    <el-steps :active="active" finish-status="success">
                        <el-step title="步骤 1"></el-step>
                        <el-step title="步骤 2"></el-step>
                        <el-step title="步骤 3"></el-step>
                    </el-steps>
                </el-menu>
            </el-header>
        </template>
        <el-container>
            <el-main style="overflow: hidden">
                <iframe name="fram" frameborder="0" width="100%" style="overflow: hidden" height="100%"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    new Vue({
        el: '#pro',
        data: {
            barlist: [],
            activeIndex: '26',
            active: 0
        },
        methods: {
            //导航栏查询
            searchbar() {
                axios.get("/pro/searchbar")
                    .then(({data}) => {
                        this.barlist = data.data;
                    })
            },
            next(index) {
                this.active = index+1;
                // if (this.active++ > 2) this.active = 1;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        mounted() {
            this.searchbar();
        },
    })
</script>
</body>
</html>